<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>在线客服</title>
		<%@include file="/WEB-INF/base.jspf"%>
		<link rel="stylesheet" href="/pc-static/css/kefu.css">
		<link rel="stylesheet" href="/kindeditor/themes/default/default.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 user-scalable=no">		
		<script src="//at.alicdn.com/t/font_577691_cbd5g1lsegzdj9k9.js"></script>
		<style type="text/css">
			  .header {background-color:#059BF3}.topItemsContainer .containerItemst {color:#fff}.topItemsContainer .containerItemsb:hover {background-color:rgba(255,255,255,0.1)}.lim_visitor .lim_name, .lim_visitor .lim_dot, .lim_visitor .lim_time {color:#999999}.activitytab ul li.active {color:#ff6fb6}.toolsbar li.fontSize ul.selectFS li:hover, .toolsbar li.fontSize ul.selectFS li.active {background:#ff6fb6;color:#fff}.sendBar .entera {background-color:#059BF3}.sendBar .entera a{ color:#fff}.sendBar .enter:not(.disable):hover{background-color:rgba(255,255,255,0.1)}.sendBar .shortcutkey {border-left:1px solid rgba(255,255,255,0.1)}.emotion_img a:hover {border-color:#ff6fb6}.lim_border .lim_bubble {border: 1px solid #ff6fb6;}.lim_visitor .lim_bubble {background-color:#ff8b02;color:#ffffff}.lim_visitor .lim_dot  {color:#ffffff!important}.lim_operator .lim_bubble {background-color:#ff8b02;color:#ffffff}.lim_operator .lim_dot {color:#ffffff!important}.lim-file .lim_bubble {background:#fff;border-color:#ff8b02}.leaveMsg_wrap .submitBtn a {background-color:#ff6fb6;color:#fff}.visitorInfo .preform .text:hover,.visitorInfo .preform .text1:hover {border: 1px solid #a2a2a2;}.visitorInfo .preform .text:focus,.visitorInfo .preform .text1:focus {border: 1px solid #ff6fb6;-webkit-box-shadow: 0 0 3px #ff6fb6;box-shadow: 0 0 3px #ff6fb6}.visitorInfo .gender_preform label.radio_checked{background: #ff6fb6!important;color: #ffffff}.visitorInfo .button_group .button {color: #fff!important;border:1px solid #ffffff !important; } .visitorInfo .button_group .button:hover {background-color: rgba(255,255,255,0.1)}.visitorInfo .button_group .btn_shadow {background-color:#ff6fb6}.topItemsContainer .jumper.noDrop .udButton{background-position:-4px -5px!important;} .topItemsContainer .jumper .udButton{background-position:-4px -5px!important;}.topItemsContainer .LMessage .udButton{background-position:-41px -5px!important;}.surveyForm .surveyComment label.radio_select{background-color: #ff6fb6!important;color: #ffffff}.surveyForm .button_group .button{background-color:#ff6fb6;color:#fff !important;}.surveyForm .button_group .button:hover{color:#fff !important;}.form-select .form-select_list .selected { color: #fff;background: #ff6fb6 !important}.visitorInfo .form-select.open { box-shadow: 0 0 3px #ff6fb6;border: 1px solid #ff6fb6}.confirmBox .msgBtn .btn_shadow { background-color:#ff6fb6;color:#fff}.confirmBox .msgBtn .btn_no:hover { background-color:rgba(255,255,255,0.1)}.body .side_l {width:0px;}.body .body_c{right:361px;}.body .side_r {width:360px;}
        .div-c-chooseChatWrapper, .div-c-chooseChatWrapper > div { display:flex; align-items:center; } .div-c-chooseChatWrapper > div > span { margin-left:16px; } .modal-body .div-c-chooseChatWrapper + .div-c-chooseChatWrapper { border-top:1px solid #cecece; } .div-c-chooseChatWrapper { justify-content:space-between; padding:2vh; } .div-c-chooseChatWrapper svg { width:6vh; height:6vh; max-width:40px; max-height:40px; } .span-pointMoney { color:red!important; font-weight: bold; font-size:13px!important; } #span-i-websiteTitle { white-space: nowrap; } #cai li.cz, .div-c-chooseChatWrapper { cursor: pointer; } 
        .layui-layer-setwin .layui-layer-close2 {display: none;}
		
			.touxiang{width:6.3vh;height:6.3vh;border-radius: 4px;margin: 1vh;background-size: 3.1vh;}
			.chatItem{padding-top: 1vh;}
			.chatItem .content{background: white;border-radius:8px;padding: 1vh;text-align: left;word-break:break-all;}
			.fromchatItem .date{color:blue}
			.fromchatItem {
				display:inline-flex;
				flex-direction:column;
				min-width:160px;
				max-width:800px;
			}
			.sendMyMessage {
				align-items: flex-end;
			}
			    .icon {
			       width: 1em; height: 1em;
			       vertical-align: -0.15em;
			       fill: currentColor;
			       overflow-y: auto;
			    }
			    p {
			    	margin:0;
			    }
			    .fromchatItem .date {
			    	margin-left:0;
			    }
			.content-chat  {
				overflow-y: auto;
				-webkit-overflow-scrolling : touch;
				position: relative;
				z-index:1;
				padding-top:2vh;
			}
			.sendMyMessage > div > p {
				text-align: right;
			}				
			
			.ke-statusbar {
				display: none;
			}
			.w-e-panel-container {
				z-index:3;
			}
 			.w-e-panel-container {
				width: 40vh!important;
			}
			.w-e-panel-tab-content {
				height:150px!important;
			}
			.w-e-panel-container {
			    left:0!important;
			    margin-left:0!important;
			}
			.w-e-toolbar {
				height:40px!important;
			}
 			#div22 {
				position: static;
			}
			.glyphicon-send {
			display: flex;
			    align-items: center;
			    justify-content: center;
			}
			.w-e-menu {
				display:flex;
				align-items:center;
			}
			.w-e-text {
				background-color:white;
				word-break:break-all;
			}
			.clearfix:after {
				content:"";
				display:block;
				clear:both;
			}
			.w-e-toolbar {
				border: 1px solid rgb(204, 204, 204);
				background-color: rgb(236, 236, 236)
			}
			.w-e-text {
				overflow: auto;
			}
			#chatView {
				z-index:4;
			}
			.div-i-linkmanItem-active {
				 background-color:#f5f5f5 !important;
			}
			
			.establish{
				text-align:center;
				color: #a5a5a5;
				margin: 10px 0;
			}
			
			.user-detail{
				background: none;
				border: 1px solid transparent;
			    border-color: #eee;
			    margin-bottom: 3px;
			    padding: 3px 10px;
			    display: none;
			    font-weight: bold;
			    font-size: 16px;
			    color:#fff;
			    line-height: 1.42857143;
    			text-align: center;
    			white-space: nowrap;
   				vertical-align: middle;
       			cursor: pointer;
       			
   				border-radius: 4px;
       			user-select: none;
			}
			.div-i-linkmanItem img
			{
				width: 4.1vh;
			    height: 4.1vh;
			    border-radius: 4px;
			    margin: 0.5vh;
			    background-size: 30px;
			}
			
			.div-i-linkmanItem1 img{
				width: 4.1vh;
			    height: 4.1vh;
			    border-radius: 4px;
			    margin: 0.5vh;
			    background-size: 30px;
			}
			
			.div-i-linkmanItem {
				display:flex;
				align-items:center;
				cursor: pointer;
			}
			.div-i-linkmanItem1 {
				display:flex;
				align-items:center;
				cursor: pointer;
			}
			.div-i-linkmanItem span {
				margin-left:1.6vh;
			}
			.div-i-linkmanItem1 span {
				margin-left:1.6vh;
			}
			.div-c-linkmansList .div-i-linkmanItem {
			    padding-top: 2px;
			    padding-bottom: 2px;
				 border: 1px solid #dfdfdf; 
			}
			.div-c-linkmansList .div-i-linkmanItem1 {
				border: 1px solid #F9F9F9;
				width:100%;
				height: 88px;
				padding:20px 10px;
				background-color: #ddd;
			}
			
			.div-c-linkmansList .div-i-linkmanItem1 img{
				width:48px;
				height: 48px;
				border-radius:50%;
				margin-right: 15px;
			}
			
		/* 	.div-c-linkmansList .div-i-linkmanItem1:first-child{
				border-top: none;
			} */
			
			.div-c-linkmansList {
				/* border: 1px solid rgb(204, 204, 204); */
				border-top:none;
				border-bottom:none;			
				/* overflow: auto; */
				/* -webkit-overflow-scrolling : touch; */
				z-index: 2; 
				position:relative;
				width:400px;
				max-height:100%;
			}
			.div-c-linkmansList ul{
				overflow: hidden;
				margin-bottom: 0;
			}
			
			
			 .div-c-right {
				border: 1px solid rgb(204, 204, 204);
				border-top:none;
				border-bottom:none;			
				overflow: auto;
				-webkit-overflow-scrolling : touch;
				z-index: 2; 
				position:relative;
				width:500px;
				max-height:100%;
				
			} 
			.div-c-linkmansList .div-i-linkmanItem:last-child {
				/* margin-bottom:6vh; */
			}
			#div-i-loginDiv {
				position: absolute;
				top:0;
				left:0;
				right:0;
				bottom:0;
				background-color:rgba(0, 0, 0, 0.6);
				display:none;
				justify-content:center;
				align-items:center;
			}
			#div-i-loginDiv.active {
				display:flex;
			}
			#div-i-loginDiv > div {
				background-color:white;
				border-radius: 24px;
				padding:4vh;
/* 				border-sizing:border-box;
				width:80%; */
			}
			#div-i-loginDiv > div > p {
				display:flex;
				align-items:center;
			}
			#div-i-loginDiv > div > p span {
			}
			.content-chat > div {
				width:100%;
				height:100%;
				display:none;
				padding:0 3vh;
			}
			.disconnect-img {
				width:60px;
				height:60px;
			}
			.content-chat-item-active {
				display:block!important;
			}
			.date {
				display: inline-flex;
			    max-width:260px;
			    min-width:260px;
			}
			.chatItem .date span + span {
			    margin-left: 7px;
			    top: 1px;
			    position: relative;			
			}
			.sendMyMessage .date {
				justify-content:flex-start;
			}
			.sendMyMessage .date span + span {
				margin-left:0;
			    top: 1px;
			    position: relative;	
			    margin-right:7px;					
			}
			.sendMyMessage .date {
				flex-direction: row-reverse;
			}
			.sendMyMessage {
				text-align: right;
			}
			.sendMyMessage .content {
				float: right;
			}
			.bodyHidden {
				overflow: hidden;
			}
			.div-c-editArea {
				width:68%;
				max-width:68%;
			}
			.chatItem-wrapper {
				display:flex;
				justify-content:flex-end;
			}
			
			.user-message{
				width:100%;
			}
			.editarea-wrapper > span {
			white-space:nowrap;
			font-size:14px;
			width:19%;
			max-width:19%;
			min-width:19%;
			margin-left:4px;
			margin-right:4px;
			}
			.editarea-wrapper > span {
				right:2px;
			}
			#div-i-main {
			min-height: 900px;
				/* overflow-x:hidden; */
			}
			.sendMessageWrapper {
				max-width:100%;
				bottom:5px;
			}
			.closeChatItemBtn {
				color: gray;
			    position: absolute;
			    right: 0px;
			    text-align: center;
			    font-size: 20px;
			    width: 20px;
			    height: 20px;
			    border-radius: 10px;
			    background-color: #eee;
			    margin-right: 5px;
			}
			.div-i-linkmanItem {
				position: relative;
			}
			#kjhf option {
				padding:0 5px;		
			}
			.div-i-linkmanItem1 {
				position: relative;
			}
			
			#div-i-rightChatView .inputWrap {
			    position: absolute;
			    bottom: 0;
			    left: 0;
			    right: 0;
			    height: 174px;
			    box-sizing: border-box;
			    border-top: 1px solid #f3f3f3;
			    background-color: #fff;
			}
			
			#div-i-rightChatView .body_c {
	position: absolute;
	left: 0;
	top: 0;
	right: 367px;
	bottom: 0;
	z-index: 1100;
	_height: 100%
}

#div-i-rightChatView .sys_capion {
	height: 32px;
	padding-left: 40px;
	box-sizing: border-box
}

#div-i-rightChatView .historyWrap {
	position: absolute;
	top: 41px;
	bottom: 174px;
	left: 0;
	right: 0;
	box-sizing: border-box;
	background: #f9f9f9;
	-webkit-transition: top .1s linear 0s;
	-moz-transition: top .1s linear 0s;
	transition: top .1s linear 0s
}

#div-i-rightChatView .sys_caption {
	padding-left: 40px;
	background: url(/img/kefu/laba-c3ffd117f3.gif) 10px center no-repeat #f4f1ee;
	height: 26px
}

#div-i-rightChatView .sys_caption .sys_caption-text,
#div-i-rightChatView .sys_caption .sys_caption-time {
	height: 26px;
	font-size: 12px;
	line-height: 26px;
	color: #454545
}

.sendBar .close {
    text-align: center;
    background: #ddd;
    border: 1px solid #e2e2e2;
    color: #666666;
    border-radius: 6px;
    font-weight: 500;
    opacity: 1;
}

.sendBar .close:hover{
	color: #fff;
	background-color: #059BF3;
	font-weight: 100;
}

.toolsbar li.kefuLx .kefu-type li {
    display: block;
    width: 120px;
    background-image: none;
    font-size: 14px;
    margin: 0; 
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    cursor: pointer;
    text-align: center;
    border-radius: 3px;
}


.toolsbar li.kefuLx .kefu-type{
	display: none;
    height: 120px;
    width: 122px;
    font-size: 14px;
    z-index: 10000;
    color: #000;
    background-color:#eaeaea;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 8px rgba(62, 62, 62, .26);
}


.toolsbar li.kefuLx .kefu-type li:hover{
	background: #059BF3;
	color: #fff;
}

.toolsbar li.kefuLx .kefu-type li .kefuContent{
	position: absolute;
    justify-content: flex-start;
    min-height: 120px;
    display: none;
    flex-direction: column;
    align-items: center;
    top: 0px;
    background: #f9f9f9;
    left: 120px;
    /* height: 200px; */
    /* padding: 10px 0; */
    width: auto;
    font-size: 14px;
    z-index: 10000;
    color: #000;
    border: 1px solid #adcbdc;
    box-shadow: 0 0 8px rgba(62, 62, 62, .26); 
}

.toolsbar li.kefuLx .kefu-type li.czConsult:hover .cz-kefu{
	display: flex;
}

.toolsbar li.kefuLx .kefu-type li.gameConsult:hover .game-kefu{
	display: flex;
}

.toolsbar li.kefuLx .kefu-type li.editConsult:hover .edit-kefu{
	display: flex;
}


.toolsbar li.kefuLx .kefu-type li .kefuContent li{
	display: block;
    width: 100px;
    background-image: none;
    font-size: 14px;
    /* margin: 5px; */
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    cursor: pointer;
    text-align: center;
    border-radius: 3px;
}

.kefuContain{
    height: 100%;
    display: none;
    position: absolute;
    top: -130px;
    left: 50px;
    font-size: 14px;
    z-index: 10;
    color: #000;
    width: 250px;
}

.toolsbar li.kefuLx:hover .kefuContain{
	display: block;
}

.toolsbar li.kefuLx .kefuContain:hover .kefu-type{
	display: block;
}

.role-operator .left{
	text-align: left;
    float: left;
}

.role-visitor .right{
	text-align: right;
    float: right;
}

.div-c-linkmansList .chat-ul{
	background: #f9f9f9;
	border-right: 1px solid #eaeaea;
}

.div-c-linkmansList .chat-ul li{
	width:50%;
	float: left;
	line-height: 60px;
    text-align: center;
    font-size: 14px;
    border-bottom: 3px solid transparent;
    cursor: pointer;
}

.div-c-linkmansList .chat-ul li span{
	margin-left: 10px;
	font-size: 14px;
	color: #b0b1b3;
}
.div-c-linkmansList .chat-ul li.active{
	border-bottom: 3px solid #26e2ee;
}

.div-c-linkmansList .chat-ul li.active span{
	color: #363c4a;
}

.div-i-linkmanItem1 .user-content{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 290px;
	font-size: 14px;
}

.user-message .user-name{
	float: left;
	margin-left: 0;
	font-size: 18px;
	margin-bottom: 5px;	
}

.user-message .user-time{
	float: right;
	margin-right: 15px;
}

.closeChatItemBtn:before{
	content:"×";
}

.messageNum{
	position:absolute;
	text-align: center;
    font-size:12px;
    width: 26px;
    height: 26px;
    background-color:#ef5754;
    border-radius: 50%;
    text-align: center;
    color:#fff;
    line-height: 26px;
    left:40px;
    top:10px;	
    font-style: normal;
   
}

#chatting{
	width: 100%;
    height: 800px;
    padding-bottom: 20px;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: auto;
}

#history_record{
	display:none;	
	width: 100%;
    height:  800px;
    padding-bottom: 20px;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: auto;
}

#chatting::-webkit-scrollbar {
    display: none;
}
			
		</style>
	</head>
		<div id="loading" class="kd-loading">
	<div class="kd-spinner">
		<span class="bounce b1"></span>
		<span class="bounce b2"></span>
		<span class="bounce b3"></span>
	</div>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>请稍等，努力加载中...</p>
</div>
<div class='wapper' style="display:none">
	<body style= "min-width:1200px;padding:0 10px;" >
		<div id="div-i-main" style="display:flex;flex:1;">
		 		<div class="div-c-linkmansList" >
		 			  <ul class="chat-name" style="padding:1vh;background:#059bf3;;color:#fff;height: 41px;" >
		 				<!-- <li>客服昵称：</li> -->
		 				<li id="KFname" style="width: 100%;line-height: 30px;"></li>
		 			</ul> 
		 			<!-- <div class="chat-header">  -->
			 			 <ul class="chat-ul">
			 				<li class="session active" style="border-right:none;"><img alt="" src="/img/chat/session_select.png" width='20'><span>会话</span></li>
			 				<li class="history"><img alt="" src="/img/chat/history.png" width='20'><span>历史</span></li>
			 			</ul> 
			 			 <ul id="chatting">
			 			 </ul>
		 				<ul id="history_record">
		 				 </ul>
		 		</div>
		 		
		 		
		  <div id="div-i-rightChatView" style="position: relative;background: #DFDFDF;min-width: 400px;width:1120px;">
				<div id="header" style="display:flex;height:50px;padding:0.5vh;justify-content:space-between;align-items:center;background-color:#059BF3;">
					<a href="javascrispt:;" class="glyphicon glyphicon-chevron-left" style="color: white;font-size: 3.5vh; visibility: hidden;"></a>
					<span style="color:white;font-weight:bold;" id="span-i-customServiceStatus"></span>
					<button class="user-detail" >用户详情</button>
					<a onclick="closeWebSocket()" class="glyphicon glyphicon-off" style="cursor: pointer; color: white;font-size: 26px;"></a>		
				</div>
				
				
			<div class="historyWrap" id="historyWrap">
                <div id="center_left1_container" class="center_left1_container">
                    <div id="history">
                        </div>
                    <div id="emotionsBox" class="unselect emotionsBox hide" unselectable="on"><div class="emotion_panel"><div class="emotion_content"><div class="emotion_default"><div class="emotion_img emotion_table_default"><div class="previewImg left hide"><img width="48px" height="48px" src="/img/kefu/cool_eye.gif"></div><div class="div-biaoqing"><a unselectable="on" normal="https://v66.livechatvalue.com/chat/chatClient/emotion/images/cute.gif" title="可爱" name="cute" class="unselect border_t_color border_l_color" data-num="1" type="default"><img unselectable="on" src="/img/kefu/cute.gif" width="40" height="40" type="default" title="可爱" class="unselect"></a><a unselectable="on" normal="https://v66.livechatvalue.com/chat/chatClient/emotion/images/daxiao.gif" title="大笑" name="risus" class="unselect border_t_color" data-num="2" type="default"><img unselectable="on" src="/img/kefu/daxiao.gif" width="40" height="40" type="default" title="大笑" class="unselect"></a><a unselectable="on" normal="https://v66.livechatvalue.com/chat/chatClient/emotion/images/like.gif" title="喜欢" name="like" class="unselect border_t_color" data-num="3" type="default"><img unselectable="on" src="/img/kefu/like.gif" width="40" height="40" type="default" title="喜欢" class="unselect"></a><a unselectable="on" normal="https://v66.livechatvalue.com/chat/chatClient/emotion/images/money.gif" title="金钱" name="money" class="unselect border_t_color" data-num="4" type="default"><img unselectable="on" src="/img/kefu/money.gif" width="40" height="40" type="default" title="金钱" class="unselect"></a><a unselectable="on" normal="https://v66.livechatvalue.com/chat/chatClient/emotion/images/inebriation.gif" title="陶醉" name="inebriation" class="unselect border_t_color" data-num="5" type="default"><img unselectable="on" src="/img/kefu/inebriation.gif" width="40" height="40" type="default" title="陶醉" class="unselect"></a><a unselectable="on" normal="https://v66.livechatvalue.com/chat/chatClient/emotion/images/doubt.gif" title="疑问" name="doubt" class="unselect border_t_color" data-num="6" type="default"><img unselectable="on" src="/img/kefu/doubt.gif" width="40" height="40" type="default" title="疑问" class="unselect"></a><a unselectable="on" normal="https://v66.livechatvalue.com/chat/chatClient/emotion/images/puzzledom.gif" title="为难" name="puzzledom" class="unselect border_t_color" data-num="7" type="default"><img unselectable="on" src="/img/kefu/puzzledom.gif" width="40" height="40" type="default" title="为难" class="unselect"></a><a unselectable="on" normal="https://v66.livechatvalue.com/chat/chatClient/emotion/images/evilGrin.gif" title="奸笑" name="EvilGrin" class="unselect border_t_color" data-num="8" type="default"><img unselectable="on" src="/img/kefu/evilGrin.gif" width="40" height="40" type="default" title="奸笑" class="unselect"></a><a unselectable="on" normal="https://v66.livechatvalue.com/chat/chatClient/emotion/images/cool_eye.gif" title="冷眼" name="coolEye" class="unselect border_t_color" data-num="9" type="default"><img unselectable="on" src="/img/kefu/cool_eye.gif" width="40" height="40" type="default" title="冷眼" class="unselect"></a><a unselectable="on" normal="https://v66.livechatvalue.com/chat/chatClient/emotion/images/cry.gif" title="哭" name="cry" class="unselect border_l_color" data-num="10" type="default"><img unselectable="on" src="/img/kefu/cry.gif" width="40" height="40" type="default" title="哭" class="unselect"></a><a unselectable="on" normal="https://v66.livechatvalue.com/chat/chatClient/emotion/images/tired.gif" title="累" name="tired" class="unselect" data-num="11" type="default"><img unselectable="on" src="/img/kefu/tired.gif" width="40" height="40" type="default" title="累" class="unselect"></a><a unselectable="on" normal="https://v66.livechatvalue.com/chat/chatClient/emotion/images/nowords.gif" title="无语" name="nowords" class="unselect" data-num="12" type="default"><img unselectable="on" src="/img/kefu/nowords.gif" width="40" height="40" type="default" title="无语" class="unselect"></a><a unselectable="on" normal="https://v66.livechatvalue.com/chat/chatClient/emotion/images/angry.gif" title="怒" name="angry" class="unselect" data-num="13" type="default"><img unselectable="on" src="/img/kefu/angry.gif" width="40" height="40" type="default" title="怒" class="unselect"></a><a unselectable="on" normal="https://v66.livechatvalue.com/chat/chatClient/emotion/images/sweat.gif" title="汗" name="sweat" class="unselect" data-num="14" type="default"><img unselectable="on" src="/img/kefu/sweat.gif" width="40" height="40" type="default" title="汗" class="unselect"></a><a unselectable="on" normal="https://v66.livechatvalue.com/chat/chatClient/emotion/images/embarrassed.gif" title="尴尬" name="embarrassed" class="unselect" data-num="15" type="default"><img unselectable="on" src="/img/kefu/embarrassed.gif" width="40" height="40" type="default" title="尴尬" class="unselect"></a><a unselectable="on" normal="https://v66.livechatvalue.com/chat/chatClient/emotion/images/ill.gif" title="生病" name="ill" class="unselect" data-num="16" type="default"><img unselectable="on" src="/img/kefu/ill.gif" width="40" height="40" type="default" title="生病" class="unselect"></a><a unselectable="on" normal="https://v66.livechatvalue.com/chat/chatClient/emotion/images/sad.gif" title="难过" name="sad" class="unselect" data-num="17" type="default"><img unselectable="on" src="/img/kefu/sad.gif" width="40" height="40" type="default" title="难过" class="unselect"></a><a unselectable="on" normal="https://v66.livechatvalue.com/chat/chatClient/emotion/images/supprise.gif" title="吃惊" name="supprise" class="unselect" data-num="18" type="default"><img unselectable="on" src="/img/kefu/supprise.gif" width="40" height="40" type="default" title="吃惊" class="unselect"></a></div></div></div></div><div class="emotion_tab"><a name="emotion_table_default" title="default" class="em_tab choose"><div class="div_emotion"></div></a></div></div></div>
                    <div id="sysTip" class="sysTip" style="display: none;"></div>
                </div>
            </div>
				
				
				
 			<!-- 	<div class="content-chat" style=""> -->
 		
				
				
			<div class="inputWrap" id="bottom">
                <div class="center_left">
                    <div class="toolsWrap" id="toolsWrap">
                        <div id="tool_wrap">
                            <ul id="toolsbar" class="toolsbar clearfix">
                                <li id="fontSize" class="fontSize" lim:init="1" title="字体" style="display: block;"><label id="font_size_value" class="font_size_value"><em>14</em></label><ul name="choseSize" id="selectOp" class="selectFS hide"><li name="12">12</li><li name="13">13</li><li name="14" class="active">14</li><li name="15">15</li><li name="18">18</li><li name="22" class="">22</li><li name="27">27</li><li name="33" class="">33</li></ul></li>
                                <li id="emoticons" class="emoji unselect" unselectable="on" lim:init="1" title="表情" style="display: block;"></li>
                                <li id="kefuType" class="kefuLx"  style="display: block;width:auto;background-image: none;font-size: 14px;margin-left: 10px;margin-top: 8px;">转接客服
                                	<div class=kefuContain>
	                               		<ul class='kefu-type'>
	                               			<li class="czConsult">充值提现咨询
	                               				<ul class="kefuContent cz-kefu">
	                               				</ul>
	                               			</li>
	                               			<li class="gameConsult">游戏优惠咨询
	                               				<ul class="kefuContent game-kefu">
	                               				</ul>
	                               			</li>
	                               			<li class="editConsult">修改信息咨询
	                               				<ul class="kefuContent edit-kefu">
	                               				</ul>
	                               			</li>	
	                               		</ul> 
                               		</div>
                                </li>
                               <!--  <li id="img" class="img" lim:init="1" title="发送图片" style="display: block;">
                                    <div class="uploadImgBox">
                                        <iframe id="uploadImgFrame" class="uploadImgFrame" scrolling="no" frameborder="no" allowtransparency="" border="0" src="/img/kefu/sendImg.html"></iframe>
                                    </div>
                                </li> -->
                              <!--   <li id="file" class="file" style="display:none" title="发送文件">
                                    <div class="uploadFileBox">
                                        <iframe id="uploadFileFrame" class="uploadFileFrame" scrolling="no" frameborder="no" allowtransparency="" border="0" src="./欢迎莅临55彩票_files/sendFile.html"></iframe>
                                    </div>
                                </li> -->
                                <li id="active" class="active" style="display:none" title="截屏"></li>
                                <li id="save" class="save" style="display:none" title="保存记录"></li>
                                <li id="switch" class="ring" style="display:none" title="关提示音"></li>
                                <li id="voiceToText" class="voice2text_open voice2text" style="display:none" title="语音输入"></li>
                                <li id="chatAgent" class="agent" style="display:none" title="二维码"></li>
                            <!--     <li id="evaluation" class="evaluation" lim:init="1" title="评分" style="display: block;"></li> -->
                                <ul id="shortKeyScreen" class="menu" style="display: none">
                                    <li data-short="CATCHSCREEN"><em></em><a href="https://v66.livechatvalue.com/chat/chatClient/chatbox.jsp?companyID=80003086&amp;configID=971#">屏幕截图 Ctrl + Alt + S</a></li>
                                    <li data-short="NORMAL"><em></em><a href="https://v66.livechatvalue.com/chat/chatClient/chatbox.jsp?companyID=80003086&amp;configID=971#">截图时隐藏当前窗口</a></li>
                                </ul>
                                <div class="clear"></div>
                            </ul>
                        </div>
                    </div>
                    <div class="inputBlock clearfix">
                        <div id="inputarea" class="inputarea">
                        	<div id="inputbox" class="inputbox" contenteditable="true" data-defaultvalue="可输入文字或粘贴截图" style="height: 100%; width: 100%;">
                        	</div>
                        </div>
                        <div id="voiceChangeText" class="hide">
                            <div id="voiceBut"></div>
                        </div>
                    </div>
                    <div class="sendBar">
                        <i id="opTypingTip" class="opTypingTip"></i>
                        <i id="powerBy" class="powerBy"></i>
                        <div class="closeEnterBar">
                            <a id="exitChat" class="close">结束对话</a>
                            <div class="entera">
                                <a id="enter" class="enter disable">发送</a>
                                <div id="shortcutkey" class="shortcutkey"></div>
                                <div id="shortKeyText" class="shortKeyText">Enter</div>
                                <ul id="shortKeyMenu" class="shortKeyMenu" style="display:none;">
                                    <li data-short="Enter"><em class="shortKeyChoose"></em><a href="https://v66.livechatvalue.com/chat/chatClient/chatbox.jsp?companyID=80003086&amp;configID=971#">[发送快捷键:Enter]</a></li>
                                    <li data-short="Ctrl+Enter"><em class=""></em><a href="https://v66.livechatvalue.com/chat/chatClient/chatbox.jsp?companyID=80003086&amp;configID=971#">[发送快捷键:Ctrl+Enter]</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
				
				
				<!-- <div class="sendMessageWrapper">
					<div class="editarea-wrapper editarea-wrapper-active">
						<svg class="icon" id="svg-i-toggleExtraTool" aria-hidden="true">
						    <use xlink:href="#icon-27CIRCLE"></use>
						</svg>	
						<div contenteditable="true" class="div-c-editArea">
						</div>
							<span class="span-c-sendNewMessage">发送</span>
					</div>
					<div class="div-c-extraTool">
						<svg class="icon w-e-menu" id="svg-i-toggleEMOJITool" aria-hidden="true">
						    <use xlink:href="#icon-smile"></use>
						</svg>
						<div class="w-e-panel-container" contenteditable=false style="width:300px; margin-left:-150px;">
							<i class="w-e-icon-close w-e-panel-close"></i>
							<ul class="w-e-panel-tab-title">
							<li data-index="1" class="w-e-item w-e-active">默认</li>
							<li data-index="2" class="w-e-item">新浪</li>
							<li data-index="3" class="w-e-item">emoji</li>
							</ul>
							<div class="w-e-panel-tab-content" style="height:200px; overflow-y:auto;">
							<div class="w-e-emoticon-container w-e-emoticon-container-active" id="w-e-emoticon-container1"><span class="w-e-item">
							<img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png" alt="[坏笑]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png" alt="[舔屏]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3c/pcmoren_wu_org.png" alt="[污]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/2c/moren_yunbei_org.png" alt="[允悲]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3a/moren_xiaoerbuyu_org.png" alt="[笑而不语]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3c/moren_feijie_org.png" alt="[费解]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/37/moren_chongjing_org.png" alt="[憧憬]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/fc/moren_bbjdnew_org.png" alt="[并不简单]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/5c/huanglianwx_org.gif" alt="[微笑]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/8a/pcmoren_cool2017_org.png" alt="[酷]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0b/tootha_org.gif" alt="[嘻嘻]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6a/laugh.gif" alt="[哈哈]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/14/tza_org.gif" alt="[可爱]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/af/kl_org.gif" alt="[可怜]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0b/wabi_org.gif" alt="[挖鼻]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/f4/cj_org.gif" alt="[吃惊]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6e/shamea_org.gif" alt="[害羞]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/c3/zy_org.gif" alt="[挤眼]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/29/bz_org.gif" alt="[闭嘴]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/71/bs2_org.gif" alt="[鄙视]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/lovea_org.gif" alt="[爱你]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/9d/sada_org.gif" alt="[泪]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/19/heia_org.gif" alt="[偷笑]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/8f/qq_org.gif" alt="[亲亲]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/b6/sb_org.gif" alt="[生病]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/58/mb_org.gif" alt="[太开心]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d9/landeln_org.gif" alt="[白眼]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/98/yhh_org.gif" alt="[右哼哼]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/zhh_org.gif" alt="[左哼哼]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/a6/x_org.gif" alt="[嘘]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/af/cry.gif" alt="[衰]" data-w-e="1"></span></div><div id="w-e-emoticon-container2" class="w-e-emoticon-container" style="display:none;"><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif" alt="[草泥马]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif" alt="[神马]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/fuyun_thumb.gif" alt="[浮云]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c9/geili_thumb.gif" alt="[给力]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f2/wg_thumb.gif" alt="[围观]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/vw_thumb.gif" alt="[威武]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/panda_thumb.gif" alt="[熊猫]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/81/rabbit_thumb.gif" alt="[兔子]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/otm_thumb.gif" alt="[奥特曼]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/15/j_thumb.gif" alt="[囧]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/hufen_thumb.gif" alt="[互粉]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c4/liwu_thumb.gif" alt="[礼物]" data-w-e="1"></span></div><div id="w-e-emoticon-container3" class="w-e-emoticon-container" style="display:none;"><span class="w-e-item">😀</span><span class="w-e-item">😃</span><span class="w-e-item">😄</span><span class="w-e-item">😁</span><span class="w-e-item">😆</span><span class="w-e-item">😅</span><span class="w-e-item">😂</span><span class="w-e-item">😊</span><span class="w-e-item">😇</span><span class="w-e-item">🙂</span><span class="w-e-item">🙃</span><span class="w-e-item">😉</span><span class="w-e-item">😌</span><span class="w-e-item">😍</span><span class="w-e-item">😘</span><span class="w-e-item">😗</span><span class="w-e-item">😙</span><span class="w-e-item">😚</span><span class="w-e-item">😋</span><span class="w-e-item">😜</span><span class="w-e-item">😝</span><span class="w-e-item">😛</span><span class="w-e-item">🤑</span><span class="w-e-item">🤗</span><span class="w-e-item">🤓</span><span class="w-e-item">😎</span><span class="w-e-item">😏</span><span class="w-e-item">😒</span><span class="w-e-item">😞</span><span class="w-e-item">😔</span><span class="w-e-item">😟</span><span class="w-e-item">😕</span><span class="w-e-item">🙁</span><span class="w-e-item">😣</span><span class="w-e-item">😖</span><span class="w-e-item">😫</span><span class="w-e-item">😩</span><span class="w-e-item">😤</span><span class="w-e-item">😠</span><span class="w-e-item">😡</span><span class="w-e-item">😶</span><span class="w-e-item">😐</span><span class="w-e-item">😑</span><span class="w-e-item">😯</span><span class="w-e-item">😦</span><span class="w-e-item">😧</span><span class="w-e-item">😮</span><span class="w-e-item">😲</span><span class="w-e-item">😵</span><span class="w-e-item">😳</span><span class="w-e-item">😱</span><span class="w-e-item">😨</span><span class="w-e-item">😰</span><span class="w-e-item">😢</span><span class="w-e-item">😥</span><span class="w-e-item">😭</span><span class="w-e-item">😓</span><span class="w-e-item">😪</span><span class="w-e-item">😴</span><span class="w-e-item">🙄</span><span class="w-e-item">🤔</span><span class="w-e-item">😬</span><span class="w-e-item">🤐</span>
							</div></div></div>						
					</div>					
				</div> -->
			</div>
			<!-- <button class='zhuanjiekefu-button'>转接客服</button> -->
			<div class="div-c-right" style="font-size: 12px;">
				<span style="width:25%;font-size:14px;position:absolute;background-color:#059bf3;color:#fff;padding:10px;text-align: center;">快捷回复</span>
				<select id="kjhf" style="width:75%;position: absolute;right: 5px;padding:10px 0;margin: 0;">
				<option  style="display:none" selected="selected" >--请选择--</option>
				</select>
		 	</div>
		</div>
<div class="modal-div-fakeModal" id="div-i-noticeGenDan">
	<div class="div-c-modalContent">
		<h3 class="fakemodal-title"></h3>
		<div class="fakemodal-content"></div>
		<div class="fakemodal-btnsGroup"><button class="btn btn-default btn-class-closeFakeModal">关闭</button></div>
	</div>
</div>				
</div>		
		
	</body>
	
	<script type="text/javascript">
	document.onreadystatechange = function(){ 
		　　 if(document.readyState == "complete"){ 　　//当页面加载状态为完全结束时进入 
		    　 //你要做的操作。
			 $(".wapper").show() 
			 $(".kd-loading").hide()
		   　 }
		}
	$('#inputbox').focus();   //一进入光标停在输入框
	$("#emoticons").on("click",function(){   //点击添加表情
		if($("#emotionsBox").hasClass("hide")){  
			$("#emotionsBox").removeClass("hide")  //弹出表情框
		}else{
			$("#emotionsBox").addClass("hide")   //移除时隐藏大表情
		}
	})
	
	$(".unselect img").on('mouseover',function(e){   //移入该表情时查看大表情
		$(".previewImg").removeClass('hide')
		var distance=$(this).parent().attr("data-num")
		if((distance>9 && distance<15) || (distance>0 && distance<6)){
			$(".previewImg").removeClass("left").addClass("right")   //在右边出现大表情
		}else{
			$(".previewImg").removeClass("right").addClass("left")  //在左出现大表情
		}
		var viewImg=$(this).attr('src')
		$(".previewImg img").attr('src',viewImg)   //显示当前表情
	})
			
		$(".unselect img").on('mouseout',function(e){    //移出时隐藏
			$(".previewImg").addClass('hide')
		})
	
		$(".div-biaoqing .unselect img").on('click',function(){  //选择当前表情
			var picture=$(this).attr('src')
			$('#inputbox').append("<img src="+picture+" width='40' height='40'>")
		})
	
	
	$("#fontSize").on("click",function(){	//点击显示聊天字体的大小
		if($('#selectOp').hasClass('hide')){  
			$('#selectOp').removeClass('hide')  //显示字头框
			$('#selectOp li').on("click",function(){   //点击选择需要的字体
			$(this).addClass('active').siblings().removeClass('active')
			var fontSize=$(this).text()
			$("body #history *").css('font-size',fontSize+"px")
			$("body #inputbox").css('font-size',fontSize+"px")
			})
		}else{
			$('#selectOp').addClass('hide') //隐藏字体框
		}
	})
	$("#inputbox").keyup(function (event) {  //回车也可以发送内容
		var userData=$("#inputbox").text()
		 if(userData.trim()==""){
			 $("#enter").addClass('disable')
			 return;
		 }else{
			 $("#enter").removeClass('disable')
		 }
		  if (event.keyCode == 13) {  //按了回车键
			 event.cancelBubble=true;
			 event.preventDefault();
			 event.stopPropagation();
			 UserSendMessage(userData,bindCurTime(),1)
			 $("#enter").addClass('disable')
        }
    });
	
	$("#enter").on("click",function(){  //点击发送
		 var userData=$("#inputbox").text()
		 if(userData.trim()==""){
			 $("#enter").addClass('disable')
			 return;
		 }
		 UserSendMessage(userData,bindCurTime(),1)
		  $("#enter").addClass('disable')
		 $('#inputbox').focus();   //一进入光标停在输入框
	})
	
	function bindCurTime(){
		var userDate = new Date();
		var time=userDate.getHours()+":"+userDate.getMinutes()+":"+userDate.getSeconds();
		return time
	}
	
	
	function UserSendMessage(content,time,num){  //客服发送的信息
		if($(".userid").val() == undefined){
			layer.open({
			    type: 1,
			    area:['15%',"20%"],
			    title:false,
			    shadeClose: true, //点击遮罩关闭
			    anim:5,
			    content: "请先选择用回复消息的用户",
			    btn:['知道了'],   // 双按钮的话["",""]	
			  });
			return;
		}
		console.log($("#history .lim_operator").length-1)
		console.log($("#history .lim_operator").eq($("#history .lim_operator").length-1).find(".disconnect-img"))
		if($("#history .lim_operator").eq($("#history .lim_operator").length-1).find(".disconnect-img").length==1){   //当前用户不在线上
			layer.open({
			    type: 1,
			    area:['15%',"20%"],
			    title:false,
			    shadeClose: true, //点击遮罩关闭
			    anim:5,
			    content: "当前用户已经离线,请该用户上线后再联系",
			    btn:['知道了'],   // 双按钮的话["",""]	
			  });
			return;
		}	
	
		//1是用户发的，0是展示的历史消息
		if(num == 1){
			send(content)
		}
		var userContent="<div id='' data-look='' class='role-visitor lim_visitor lim_clearfloat'>"+
							"<div class='chater_info right'>"+
								"<span class='lim_name'>您说：</span>"+
								"<span class='lim_time'>"+time+"</span>"+  //当前发送时间
							"</div>"+
							"<div class='lim_bubble'>"+
								"<div class='lim_content' name='text'>"+
									"<div class='lim_dot'>"+content+"</div>"+      //客服发送的内容
								"</div>"+
							"</div>"+
						"</div>"
		$("#history").append(userContent)
		$("#inputbox").empty()
		 $('.center_left1_container').scrollTop($('.center_left1_container')[0].scrollHeight+100)
	}
	
	function setFocus(id){ 
		var t=$("#"+id).text(); 
		$("#"+id).text("").focus().text(t); 
	} 
	$('#exitChat').on("click",function(){
		var $curlink=$("#chatting").find(".div-i-linkmanItem-active")
		if($curlink.length==0){
			layer.open({
			    type: 1,
			    area:['20%',"15%"],
			    title:false,
			    shadeClose: true, //点击遮罩关闭
			    anim:5,
			    content: "请先选择需要关闭的联系人",
			    btn:['我知道了'],   // 双按钮的话["",""]	
			  });
		}else{
			layer.open({
			    type: 1,
			    area:['20%',"15%"],
			    title:false,
			    shadeClose: true, //点击遮罩关闭
			    anim:5,
			    content: "您确定要关闭与当前联系人聊天的对话窗吗?",
			    btn:['确定','取消'],   // 双按钮的话["",""]	
			    yes: function(index, layero){ //或者使用btn1
			    	/* closeWebSocket()
			     	window.close(); */ 
			    	/* window.location.href='/pc/index.do' */
				    	$.ajax({
							type:"post",
							url:"/kf/updateChatRecord.do",
							data:{
								"kefu_id":MY_ID,
								"user_id":$curlink.attr("data-id"),
								"statu":0,
							},
							success:function(data){
								$curlink.parent().remove();
								$("#span-i-customServiceStatus").hide();
								var index=USER_ID_ARRAY.indexOf($curlink.attr("data-id"))
								USER_ID_ARRAY.splice(index,1)
								$("#history").empty();
								layer.close(layer.index)
						    }
					  });
			    }
			  });
		}
		
	})
	
	function KefuGetMessage(content,time,id,name){  //用户回复的信息
		var kefuContent
		console.log(content)
		if(content=="与用户端连接成功"){
			kefuContent="<div class='establish'>与用户端连接成功</div>"
		}else{
		kefuContent="<div id='' data-look='' class='role-operator lim_operator lim_clearfloat' data-id='M_55cpcc_841_20181229174107_984'>"+
							"<div class='chater_info left'>"+
								"<input class='userid' style='display:none' value ='"+id+"'/>"+
								"<span class='lim_name'>"+name+"-</span>"+
								"<span class='lim_time'>-"+time+"</span>"+  //当前时间
							"</div>"+
							"<div class='lim_bubble'>"+
								"<div class='lim_content' name='text'>"+
									
									"<div class='lim_dot'>"+content+"</div>"+    //用户回复的内容
								"</div>"+
							"</div>"+
						"</div>";
		}
						$("#history").append(kefuContent)
						$('.center_left1_container').scrollTop($('.center_left1_container')[0].scrollHeight+100)
	}
	
	 $.ajax({
			type:"post",
			url:"/kf/findByTypeKeFuQuick.do",
			data:{},
			success:function(data){
				var newData=data.data;
				var kjhfList = document.querySelector("#kjhf")
				for(i=0;i<newData.length;i++){
					var html="<option>"+newData[i].content+"</option>";
					$("select").append(html)
				}
				$("#kjhf").on("change",function(e){
			 	 	var content=$(this).val()
			 	 	UserSendMessage(content,bindCurTime(),1)
			 		
			 	})
			}
		});
	
	
	/* =============================楚河汉界，坚决不同流合污========================================= */
	
	
	
	var user_state=false;
	 $(".kefu-type li").on("mouseover",function(e){
		  var kefuType=$(e.target).attr("class")
		if(kefuType=='czConsult'){
			contactCustomerServicesht(1,"cz-kefu")
		}else if(kefuType=='gameConsult'){
			contactCustomerServicesht(2,"game-kefu")
		}else if(kefuType=='editConsult'){
			contactCustomerServicesht(3,"edit-kefu")
		} 
	})
	
	function contactCustomerServicesht(typeht,classs){
		  	$.ajax({  
		  		type:"post",  
		  		url:"/kf/kefuht.do",  
		  		data:{  
		  			"type":typeht,  
		  		},  
		  		success:function(data){  
		  			if(data.data.length >= 1){
			  			$(".kefu-type ."+classs).html("")
			  			for(var i = 0;i<data.data.length;i++){
			  				var html = "<li class='li-select-span-kf'><span style='display:none'>"+data.data[i].id+"</span><span style='display:none'>"+typeht+"</span>"+data.data[i].nick_name+"</li>";
			  				 $(".kefu-type ."+classs).append(html) 
			  			}
		  			}else{  
		  	    		  console.log("没有在线的客服")
		  			} 
		  		},  
		  		complete: function(xhr) {  
		  	    	if(xhr.status == 1314520 || xhr.status == '0'){
		  	    		//没有登录 请登录后在来吧
		  	    		/* PrentLayerLittle("提示","联系在线客服需要登录后可联系哦") */
		  	    		layer.open({
		  	    		    type: 1,
		  	    		    area:['20%',"20%"],
		  	    		    title:false,
		  	    		    shadeClose: false, //点击遮罩关闭
		  	    		    content: "亲，请先登录哦",
		  	    		 	closeBtn:1,
		  	    		    btn:'我知道了',   // 双按钮的话["",""]	
			  	    		yes: function(index, layero){ //或者使用btn1
			  			    }
		  	    		  });
		  	    	}  
		  	   	} 	
		  	});  
		}

	$(".kefuContain").on("click",".li-select-span-kf",function(e){
		var str = "转接客服kjh98fgdkj3i45y89fdh4598hp90u:"+$(this).find('span').eq(0).text()+","+$(this).find('span').eq(1).text()
		//转接客服
		send(str)
		UserSendMessage("转接客服成功","",0)
	})

	$(".chat-ul li").on("click",function(){    //侧边栏历史和会话的切换
		$("#history").empty();
		$(".div-i-linkmanItem1").removeClass("div-i-linkmanItem-active")
		$(this).addClass("active").siblings().removeClass("active")
		$("#span-i-customServiceStatus").hide();
		if($(this).hasClass("session")){
			$(this).find("img").attr("src","/img/chat/session_select.png")
			$(".history img").attr("src","/img/chat/history.png")
			 $("#chatting").show() 
			 $("#history_record").hide();
		}else{
			$.ajax({
				type:"post",
				url:"/kf/findChatLinkman.do",
				data:{type:1},     //查询历史联系人
				success:function(data){
					 $("#history_record").empty();
					for(i = 0 ;i < data.data.length;i++){
					 var historyList=document.querySelector("#history_record")
					 var html = "<li class='userli'><div id='linkmanItem" + data.data[i].user_id + "' class='div-i-linkmanItem-active1 div-i-linkmanItem1' data-name='" + data.data[i].user_name+ "' data-id='" + data.data[i].user_id + "'>"+
					"<img src='/d/cp/"+data.data[i].user_avatar+"'/> "+
					"<div class='user-message'> "+
						"<div style='word-break:break-all;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;'><span class='user-name'>" + data.data[i].user_name +"</span><span class='user-time'>"+bindTimeDate(data.data[i].created_time)+"</span></div>"+
						"<p class='user-content'>"+data.data[i].content+"</p>"+
					"</div>"+
 					"<i class='fa fa-close fa-1x closeChatItemBtn'></i></div></li>"
 					historyList.insertAdjacentHTML("afterbegin", html)
					}
				}
			}); 
			$(this).find("img").attr("src","/img/chat/history_select.png")
			$(".session img").attr("src","/img/chat/session.png")
			$("#history_record").show();
			$("#chatting").hide()
		}
	})
	
	function bindTimeDate(time){   //展示小时分钟
		time=time.split(" ")[1]
		time=time.split(":")
		time=time[0]+":"+time[1]
		return time
	}
	
	function bindTimeMouth(time){
		time=time.split(" ")[0]+" "+time.split(" ")[1].split(":")[0]+":"+time.split(" ")[1].split(":")[1]
		return time;
	}
	
	
	
	var chatting = function(){
		 $.ajax({
			type:"post",
			url:"/kf/findChatLinkman.do",
			data:{type:2},     //查询当天的会话记录
			success:function(data){
				 var array=[];
				//我进来创建用户头像啦
				for(i = 0 ;i < data.data.length;i++){
						//正在创建头像
						console.log(USER_ID_ARRAY)
						if(USER_ID_ARRAY.indexOf(data.data[i].user_id)==-1){
							USER_ID_ARRAY.push(data.data[i].user_id)
							var customerList = document.querySelector("#chatting") 
							var html = "<li class='userli'><div id='linkmanItem" + data.data[i].user_id + "' class='div-i-linkmanItem-active1 div-i-linkmanItem1' data-name='" + data.data[i].user_name+ "' data-id='" + data.data[i].user_id + "'>"+
							"<img src='/d/cp/"+data.data[i].user_avatar+"'/> "+
							"<div class='user-message'> "+
								"<div style='word-break:break-all;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;'><span class='user-name'>" + data.data[i].user_name +"</span><span class='user-time'>"+bindTimeDate(data.data[i].created_time)+"</span></div>"+
								"<p class='user-content'>"+data.data[i].content+"</p>"+
							"</div>"+
							"<i class='messageNum'>0</i>"+
		 					"<i class='fa fa-close fa-1x closeChatItemBtn'></i></div></li>"
		 					customerList.insertAdjacentHTML("afterbegin", html)
		 					 var eleMessage=$("#linkmanItem"+data.data[i].user_id).find(".messageNum")
		 					if(user_state){
		 						var number=Number(eleMessage.text())+1
		 						eleMessage.text(Number(eleMessage.text())+1)
								localStorage.setItem(data.data[i].user_id,number)     //存住这个用户消息的数量
								$("#linkmanItem"+data.data[i].user_id).parent().insertBefore($("#chatting li").eq(0))
		 					}
		 					 var usermessage=localStorage.getItem(data.data[i].user_id) 
		 					if(usermessage==null){   //这个用户没有发过未读消息
		 						eleMessage.hide()
		 						array.push("0")
		 					}else{
		 						array.push(usermessage)
		 						eleMessage.text(usermessage)   //显示这个用户的未读消息数量
		 						eleMessage.show(); 
		 					}
						}
				}
				array.reverse();
				var array1=[];
				for(var i=0;i<array.length;i++){
					array1[i]=array[i]
				}
				var array2=array.sort().reverse();
				 for(i=0;i<array2.length;i++){
					var sub=array1.indexOf(array2[i])
					$("#chatting .userli").eq(sub).insertBefore($("#chatting li").eq(i))
				} 
			}
		}); 
		
	}
	
	chatting();
	bindClickMessage("#chatting",2)
	bindClickMessage("#history_record",1)
	function bindClickMessage(selector,type){
		$(selector).on("click",".div-i-linkmanItem-active1",function(e){
			if($(e.target).hasClass("closeChatItemBtn")){   //点击了删除该联系人的操作
				layer.open({
				    type: 1,
				    area:['20%',"15%"],
				    title:false,
				    shadeClose: true, //点击遮罩关闭
				    anim: 2,
				    content: "您确定要删除该联系人和会话信息吗",    //右边也可以自己定义样式，引用时最外面的那个id,如$("#"+"ID名")
				    btn:['确定','取消'],
				    yes: function(index, layero){ //或者使用btn1
				    	$.ajax({
							type:"post",
							url:"/kf/updateChatRecord.do",
							data:{
								"kefu_id":MY_ID,
								"user_id":$(e.target).parent().attr("data-id"),
								"statu":0,
							},
							success:function(data){
								$(e.target).parent().parent().remove();
								$("#span-i-customServiceStatus").hide();
								var index=USER_ID_ARRAY.indexOf(Number($(e.target).parent().attr("data-id")))
								USER_ID_ARRAY.splice(index,1)
								$("#history").empty();
								layer.close(layer.index)
						    }
					  });
					}
				})
				return;
			}
			//点击谁，当前用户就高亮
			var USERID=e.currentTarget.dataset.id
			$(this).addClass("div-i-linkmanItem-active");
			$(this).parent().siblings().find(".div-i-linkmanItem-active1").removeClass("div-i-linkmanItem-active");
			$("#inputbox").focus();
			$("#span-i-customServiceStatus").show()
			$(".user-detail").show();
			$(".userId").val($(e.target).parent().attr("data-id"))
			$("#span-i-customServiceStatus").text("正在和"+$(this).find(".user-name").text()+"聊天")
			$(".user-detail").on("click",function(){
				window.open("/kajhsgweasdqtwehghasfdnsak6868/findByIdUserInfo.do?id="+USERID, "_blank", "scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes");
			})
			if(selector=="#chatting"){
				$(this).find(".messageNum").text(0);
				localStorage.removeItem($(this).attr("data-id"))    //把未读的记录标记为已读，清除该用户的未读消息数量
				$(this).find(".messageNum").hide();
			}
				$.ajax({
					type:"post",
					url:"/kf/findChatRecord.do",
					data:{
						"kefu_id":MY_ID,
						"user_id":USERID,
						"type":type,
					},
					success:function(data){
						if(data.message==null){
							return;
						}
					$("#history").empty()
						for (var i = 0; i < data.data.length; i++) {
							var item = data.data[i]
							if (item.sender === 0) {  //客服
								if(selector=="#chatting"){   //聊天
									UserSendMessage(item.content,bindTimeDate(item.created_time),0)
								}else{  //历史
									UserSendMessage(item.content,bindTimeMouth(item.created_time),0)
								}
							} else {   //会员
								if(selector=="#chatting"){   //聊天
									KefuGetMessage(item.content,bindTimeDate(item.created_time),item.user_id,item.user_name)
								}else{  //历史
									KefuGetMessage(item.content,bindTimeMouth(item.created_time),item.user_id,item.user_name)
								}
							}		
						}
					/* $(".disconnect-img").css("width","48px")
 					$(".disconnect-img").css("height","48px")
 					$(".disconnect-img").css("border-radius","50%")
 					$(".disconnect-img").css("margin-right","15px") */
					}
				})			
			})
		}
	
	//处理用户发送过来的消息name1,":"+name1 +
	var userMessage=function(date,id,name,message){
		var liaotianid = $(".userid").val()
		if(liaotianid != undefined){
			if(id != liaotianid){
				return
			}
		}
		if($(".div-i-linkmanItem1").hasClass("div-i-linkmanItem-active")){  //正在和该用户聊天，显示在网页上
			KefuGetMessage(message,date,id,name)
		}
	}
	
	var DEVICE_TYPE = ""
	var websocket = null
	var USER_ID_ARRAY = []
	var MY_NAME = ""
	var MY_ID = ""
	var EVENT_OBJECT = {
		"computer": {touchStartEvent: "click", touchEvent: "click"},
		"mobile": {touchStartEvent: "touchstart", touchEvent: "touchend"},
	}
/* 	bindEditContentEvent() */
	//创建时间格式化显示
	function dateFtt(fmt,date) { //author: meizz   
		var o = {
			"M+" : date.getMonth() + 1, //月份   
			"d+" : date.getDate(), //日   
			"h+" : date.getHours(), //小时   
			"m+" : date.getMinutes(), //分   
			"s+" : date.getSeconds(), //秒   
			"q+" : Math.floor((date.getMonth() + 3) / 3), //季度   
			"S" : date.getMilliseconds()//毫秒   
		};
		if (arguments.length == 1) {
			fmt = 'yyyy-MM-dd hh:mm:ss';
		}
		if (/(y+)/.test(fmt)){
			fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
		}
		for ( var k in o){
			if (new RegExp("(" + k + ")").test(fmt)){
				fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]): (("00" + o[k]).substr(("" + o[k]).length)));
			}
		}
		return fmt;
	}
		function crtTimeFtt(){
		    var time = top.dateFtt("yyyy-MM-dd hh:mm:ss",new Date());
		    var newDate = time.substr(5, time.length-1);
		    return newDate;
		}
		//将消息显示在网页上
		function setMessageInnerHTML(message) {
			var dataArray = message.split("k45jk459fgjdf986kjh98fgdkj3i45y89fdh4598hp90u")
			var idData = dataArray[0]
			var urlPath = "/kf/getUserById.do"
				var newRequest = {
					url: urlPath,
					type: "post",
					data: {
						id: idData
					},
					success: function(data) {
						var newData = JSON.parse(data)
						/* console.log(USER_ID_ARRAY,"USER_ID_ARRAY") */
						console.log(USER_ID_ARRAY,Number(idData))
						 if (USER_ID_ARRAY.includes(Number(idData))) {     //数组里存在该用户
							 $.ajax({    //显示联系人最新的一条数据
									type:"post",
									url:"/kf/findChatRecord.do",
									data:{
										"kefu_id":MY_ID,
										"user_id":idData,
										"type":2,
									},
									success:function(data){
										var finalData=data.data[data.data.length-1]
										$("#linkmanItem"+idData).find(".user-time").text(bindTimeDate(finalData.created_time))
										$("#linkmanItem"+idData).find(".user-content").html(finalData.content)
									}
								})
							 user_state=false;
						 //判断是否在和该用户聊天，如果不在，则未读消息加1
						 if(!$("#linkmanItem"+idData).hasClass("div-i-linkmanItem-active")){
							 $("#linkmanItem"+idData).find(".messageNum").show()
							 $("#linkmanItem"+idData).find(".messageNum").text(Number($("#linkmanItem"+idData).find(".messageNum").text())+1)
							 var number=$("#linkmanItem"+idData).find(".messageNum").text()
							 localStorage.setItem(idData,number)     //存住这个用户消息的数量 
						 }
							$("#linkmanItem"+idData).parent().insertBefore($("#chatting li").eq(0))
							var divElement = document.querySelector("#linkmanItem" + idData)
							userMessage(crtTimeFtt(),idData, newData.data.name,dataArray[1])			
						} else {   //不存在
							user_state=true
							 chatting()
					   		 userMessage(crtTimeFtt(),newData.data.id, newData.data.name,dataArray[1])						
						} 
					},
				}
				ajax(newRequest)					
		
		};
		//关闭连接
		function closeWebSocket() {
			console.log("连接关闭了")
			websocket.close();
		};
		
		window.onbeforeunload = function (e) {
			closeWebSocket()
		};
		
		//发送消息
		function send(messageValue) {
			if (messageValue == "") {
				return
			}
			var id = $(".userid").val()
			if(id == undefined || id == ''){
				return
			}
			var message = "kefu"+MY_ID +"k45jk459fgjdf986kjh98fgdkj3i45y89fdh4598hp90u" + id + "k45jk459fgjdf986kjh98fgdkj3i45y89fdh4598hp90u"+ messageValue
			websocket.send(message);
		};			
		function checkTime(i) {
			if (i < 10) {
				i = "0" + i;
			}
			return i;
		}
		function date() {
			var today = new Date;
			var y = checkTime(today.getFullYear());
			var mm = checkTime(today.getMonth() + 1);
			var d = checkTime(today.getDate());
			var h = checkTime(today.getHours());
			var m = checkTime(today.getMinutes());
			var s = checkTime(today.getSeconds());
			y = h + ':' + m + ':' + s;
			return y;
		}
		var isComputerOrMobile = function() {
			if (window.ontouchend === undefined) {
				DEVICE_TYPE = "computer"
		    	$(".span-c-sendNewMessage span").addClass("pc-sendNewMessage")	
			} else {
				DEVICE_TYPE = "mobile"
		        document.addEventListener('touchstart',function (event) {  
		            if(event.touches.length>1){  
		                event.preventDefault();  
		            }  
		        })  
		        var lastTouchEnd=0;  
		        document.addEventListener('touchend',function (event) {  
		            var now=(new Date()).getTime();  
		            if(now-lastTouchEnd<=200){  
		                event.preventDefault();  
		            }  
		            lastTouchEnd=now;  
		        },false) 			   
			}
		}
   		
   		var bindAdminUserInfoBtnEvent = function() {
   			$.ajax({
   				url: "/kf/findAdminUserInfo.do",
				type: "post",
				datatype:"json",
				data: {},
				success: function(data) {
					MY_NAME = data.data.nick_name;
					MY_ID = data.data.id;
					$("#KFname").text(MY_NAME)
					init(data.data.id);
				}
   			});	
   		}
   		/* 客服语音提示 */
   		function voiceTipsforCustomerService(){
   		 	// 音频文件
            var src = "/music/kefu.wav";
            // 初始化Aduio
            var audio = new Audio();
            var playPromise;
            audio.src = src;
            playPromise = audio.play();
   		}
   		
		isComputerOrMobile()
		bindAdminUserInfoBtnEvent()
		var init = function(id) {
			var url=window.location.href.replace("kf/kefu.do","").replace("http","ws")
			//判断当前浏览器是否支持WebSocket
			if ('WebSocket' in window) {
				websocket = new WebSocket(url+"websocket?name=kefu"+id);
			} else {
				alert('Not support websocket');
			};
		
			//连接发生错误的回调方法
			websocket.onerror = function() {
				setMessageInnerHTML("error");
			};
		
			//连接成功建立的回调方法
			 websocket.onopen = function(event){
				console.log("连接成功");
			}; 
		
			//接收到消息的回调方法
			websocket.onmessage = function(event) {
				console.log("收到的消息： "+event.data);
				voiceTipsforCustomerService();
				setMessageInnerHTML(event.data);
			};
		
			//连接关闭的回调方法
			websocket.onclose = function(event) {
				/* console.log("已断开连接： "+event); */
				/* setMessageInnerHTML("断开连接，对方将不再收到你的消息"); */
			};
		
			//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
			window.onbeforeunload = function(event) {
				console.log("连接异常端口： "+event);
				websocket.close();
			};
			
		}	
		</script>
</html>